<template>
  <div class="hello">
    <div class="title">
      <div class="back iconfont icon-fanhui" @click="goBack"></div>
      <div class="titCtx">版本更新信息</div>
    </div>
    <ul>
      <li v-for="item in logList" :key="item.id">
        <h4>{{ item.time }}</h4>
        <p><strong>{{ item.title }}</strong></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'updateLog',
  data() {
    return {
      logList: [
        { id: 1, title: '发布初始版小管家', time: '2025-07-20' },
        { id: 2, title: '增加更新日志', time: '2025-07-24' },
      ]
    }
  },
  mounted() {
    this.logList = this.logList.reverse()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.hello {
  margin: 5px 8px;
  padding: 5px 5px;

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: start;
    align-items: center;
    .back {
      // align-items: center;
    }

    .titCtx {
      // justify-content: center;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  ul,
  li {
    list-style-type: none;
    padding: 10px;

    h4 {
      text-align: left;
    }

    p {
      font-size: 14px;
      color: orange;
      font-weight: 400;
    }
  }
}
</style>
